<template>
  <div>
    <h1>案例一：条件</h1>
    <div>
      <p v-if="seen">现在你看到我了</p>
    </div>

    <h1 class="mt50">案例二：循环</h1>
    <div>
      <ol>
        <li v-for="(item, index) in todos" :key="index">
          {{ item.text }}
        </li>
      </ol>
    </div>

    <h1 class="mt50">案例三：处理用户输入</h1>
    <div>
      <p>{{ message }}</p>
      <button @click="reverseMessage">反转消息</button>
    </div>

    <h1 class="mt50">案例四： 双向绑定</h1>
    <div>
      <p>{{ textaa }}</p>
      <input v-model="textaa" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seen: true,
      todos: [
        { text: "学习 JavaScript" },
        { text: "学习 Vue" },
        { text: "整个牛项目" },
      ],
      message: "Hello Vue.js!",
      textaa: "Hello Vue!",
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split("").reverse().join("");
    },
  },
};
</script>

<style scoped></style>
